<template>
<div class="container subsidy">
    <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/subsidy/subsidy_header.png" class="hd-img-responsive header-ad"/>
    <div class="stat hd-shadow">
        <div class="total">
            <div class="title">补贴总额</div>
            <div class="num"><em>¥</em>2600</div>
        </div>
        <div class="used van-hairline--right">
            <div class="title">已用补贴</div>
            <div class="num"><em>¥</em>0</div>
        </div>
        <div class="remain">
            <div class="title">剩余补贴</div>
            <div class="num"><em>¥</em>2600</div>
        </div>
    </div>
    <div class="menu hd-shadow">
        <div class="item van-hairline--right">
            <van-icon name="balance-o" />
            <div class="txt">领取补贴</div>
        </div>
        <div class="item van-hairline--right">
            <van-icon name="qr" />
            <div class="txt">使用补贴</div>
        </div>
        <a class="item van-hairline--right" href="#/subsidy_balance">
            <van-icon name="paid" />
            <div class="txt">补贴剩余</div>
        </a>
        <a class="item" href="#/subsidy_tips">
            <van-icon name="description" />
            <div class="txt">补贴说明</div>
        </a>
    </div>
    <van-tabs v-model="active" sticky class="shop-list">
        <van-tab title="文化补贴">
            <a class="item"
               v-for="(item, index) in subsidylist"
               :key="index"
               @click="info(item)"
            >
                <img :src="item.img" class="hd-img-responsive"/>
                <div class="info">
                    <div class="main-info van-hairline--right">
                        <div class="title">{{item.name}}</div>
                        <div class="desc">{{item.discount_description}}</div>
                    </div>
                    <div class="subsidy-info">
                        <div class="discount">{{item.discount}}</div>
                        <div class="title">补贴折扣</div>
                    </div>
                </div>
            </a>
            <a href="#/subsidy_detail" class="item van-hairline--bottom">
                <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/subsidy/subsidy_cal_01.png" class="hd-img-responsive"/>
                <div class="info">
                    <div class="main-info van-hairline--right">
                        <div class="title">图怪兽书店</div>
                        <div class="desc">会打字就能用的在线编辑器。</div>
                    </div>
                    <div class="subsidy-info">
                        <div class="discount">20%</div>
                        <div class="title">补贴折扣</div>
                    </div>
                </div>
            </a>
            <a class="item">
                <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/subsidy/subsidy_cal_02.png" class="hd-img-responsive"/>
                <div class="info">
                    <div class="main-info van-hairline--right">
                        <div class="title">华储书城</div>
                        <div class="desc">一家专门销售计算机图书的专业书城,上万款专业图书等你挑选。</div>
                    </div>
                    <div class="subsidy-info">
                        <div class="discount">20%</div>
                        <div class="title">补贴折扣</div>
                    </div>
                </div>
            </a>
        </van-tab>
        <van-tab title="旅游补贴">旅游补贴</van-tab>
        <van-tab title="生日补贴">生日补贴</van-tab>
        <van-tab title="医药补贴">医药补贴</van-tab>
        <van-tab title="餐饮补贴">餐饮补贴</van-tab>
        <van-tab title="购物补贴">购物补贴</van-tab>
        <van-tab title="生鲜补贴">生鲜补贴</van-tab>
        <van-tab title="教育补贴">教育补贴</van-tab>
        <van-tab title="车辆补贴">车辆补贴</van-tab>
        <van-tab title="牙科补贴">牙科补贴</van-tab>
        <van-tab title="住宿补贴">住宿补贴</van-tab>
        <van-tab title="保健补贴">保健补贴</van-tab>
        <van-tab title="洗浴补贴">洗浴补贴</van-tab>
    </van-tabs>
</div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      value: 1,
      subsidylist: []
    }
  },
  methods: {
    init () {
      this.$http({
        fun: 'subsidylist',
        requestType: 'get',
        cb: res => {
          console.log(res)
          this.subsidylist = res.results
          this.subsidylist.forEach(item => {
            console.log('111')
          })
        }
      })
    },
    info (item) {
      console.log(item.id)
      this.$router.push({
        name: 'subsidy_detail',
        query: {
          'id': item.id
        }
      })
    }
  },

  mounted () {
    this.init()
  }
}
</script>

<style src="./index.css" scoped>
</style>
